<template>
  <van-popup class="student-select another-select" v-model="$store.state.dias.anotherSelect.show" position="right" :overlay="true">
    <div class="pr box">
      <van-tabs v-model="active" @change="getListData">
        <van-tab v-for="(item, index) in tabData" :key="index" :title="item.label"></van-tab>
      </van-tabs>

      <!-- <div>
        <p class="level_1"><span>全体学生</span><van-checkbox class="check" v-model="selectAll" shape="box" checked-color="#00998d" @change="setSelectAll"></van-checkbox></p>
        <ul class="level_2_box">
          <li v-for="(item, index) in listData" :key="index">
            <p>
              <span @click.stop.prevent="hideShow(item)">{{item.class}}</span>
              <van-checkbox class="check fr" v-model="item.selected" shape="box" checked-color="#00998d" @change="changeSelect(item)"></van-checkbox>
            </p>
            <ul class="level_3_box" v-show="item.childShow">
              <li v-for="(stu, index) in item.list" :key="index">
                <van-checkbox class="check" v-model="stu.selected" shape="box" checked-color="#00998d" @change="changeSelect2(item,stu)">{{stu.name}}</van-checkbox>
              </li>
            </ul>
          </li>
        </ul>
      </div> -->

      <div class="over-auto">
        <ul class="level_2_box" v-if="active!=2">
          <li v-for="(item, index) in listData" :key="index">
            <p>
              <span @click.stop.prevent="hideShow(item)">{{item.name}}</span>
              <van-checkbox class="check fr" v-model="item.selected" shape="box" checked-color="#00998d" @change="changeSelect(item)"></van-checkbox>
            </p>
            <ul class="level_3_box" v-show="item.childShow">
              <li v-for="(stu, index) in item.list" :key="index">
                <p>
                  <van-checkbox class="check" v-model="stu.selected" shape="box" checked-color="#00998d" @change="changeSelect2(item,stu)">{{stu.name}}</van-checkbox>
                </p>
              </li>
            </ul>
          </li>
        </ul>

        <ul class="level_2_box system" v-else>
          <li v-for="(item, index) in listData" :key="index">
            <p>
              <span @click.stop.prevent="hideShow(item)">{{item.grade}}</span>
              <van-checkbox class="check fr" v-model="item.selected" shape="box" checked-color="#00998d" @change="changeSelect(item)"></van-checkbox>
            </p>
            <ul class="level_3_box" v-show="item.childShow">
              <li v-for="(stu, index) in item.list" :key="index">
                <p>
                  <span @click.stop.prevent="hideShow(stu)">{{stu.class}}</span>
                  <van-checkbox class="check fr" v-model="stu.selected" shape="box" checked-color="#00998d" @change="changeSelect(stu)"></van-checkbox>
                </p>
                <ul class="level_4_box" v-show="stu.childShow">
                  <li v-for="(opt, index) in stu.list" :key="index">
                    <p>
                      <van-checkbox class="check" v-model="opt.selected" shape="box" checked-color="#00998d">{{opt.name}}</van-checkbox>
                    </p>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>

      <van-button type="primary" @click="save" class="bc-green btn-sure pa">确定</van-button>
    </div>
  </van-popup>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      listData:[],
      selectAll:true,

      active:0,
      tabData:[
        {label:"我创建",url:"message/myGroupDetail"},
        {label:"我加入",url:"message/intrantGroupDetail"},
        {label:"系统分组",url:"message/systemGroup"}
      ]
    };
  },
  methods: {
    save(){
      var numbers=[]
      if(this.active!=2){
        this.listData.forEach(ele0=>{
          ele0.list.forEach(ele1=>{
            if(ele1.selected)numbers.push(ele1.number)
          })
        })
      }else{
        this.listData.forEach(ele0=>{
          ele0.list.forEach(ele1=>{
            ele1.forEach(ele2=>{
              if(ele2.selected)numbers.push(ele2.number)
            })
          })
        })
      }
      this.$store.state.dias.studentSelect.selectedNumber=[...new Set(numbers)]
      this.$store.state.dias.anotherSelect.show=false
    },

    getListData(){
      var url = this.tabData[this.active].url
      _g.apiPost(url,{}).then(res=>{
        var results=this.active!=2?res:res.studentList
        results.forEach(ele => {
          ele.selected=false
          ele.childShow=false
          ele.list.forEach(ele1=>{
            ele1.selected=false
            ele1.childShow=false
            if(ele1.list){
              ele1.list.forEach(ele2=>{
                ele2.selected=false
              })
            }
          })
        });
        this.listData=results
      })
    },
    hideShow(item){
      item.childShow=!item.childShow
    },

    setSelectAll(){
      this.listData.forEach(ele0=>{
        ele0.selected=this.selectAll
        ele0.list.forEach(ele1=>{
          ele1.selected=this.selectAll
        })
      })
    },
    changeSelect(item){
      item.list.forEach(ele=>{
        ele.selected=item.selected
      })
    },
    changeSelect2(item,stu){
      
    }
  },
  created() {
    setTimeout(()=>{
      this.getListData()
    },600)
  },
};
</script>
<style lang="scss" scoped>
.student-select {
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;

  .box{
    height: 100%;
  }
  .btn-sure{
    left: 10px;
    width: calc(100% - 45px);
    bottom: 10px;
  }
  .level_1{
    display: flex;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
  }
  .check{
    margin-left: auto;
  }
  p{
    height: 90px;
    line-height: 90px
  }
  .level_2_box{
    
    >li{
      padding:0 20px;
      position: relative;

      p{
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
      }
    }
    >li:before{
      // position: absolute;
      // content: "";
      // padding: 10px;
      // border-radius: 50%;
      // top: 15px;
      // left: 5px;
      // background-color: #00998d;
    }
  }

  .level_3_box,{
    line-height: 90px;
    >li{
      box-sizing: border-box;
      position: relative;

      p{
        height: 90px;
        line-height: 90px;
        padding-left: 20px;
      }
    }
    >li:before{
      position: absolute;
      content: "";
      padding: 10px;
      border-radius: 50%;
      top: 15px;
      left: 5px;
      background-color: #00998d;
    }
  }
  .over-auto{
    height: calc(100% - 230px);
    overflow: auto;
  }
  .system .level_3_box{

    >li{
      
      position: relative;

      p{
        padding-left: 20px;
      }
    }
    >li:before{
      position: absolute;
      content: "";
      padding: 10px;
      border-radius: 50%;
      top: 15px;
      left: 5px;
      background-color: #00998d;
    }
  }
  .level_4_box{
    line-height: 90px;
    
    >li{
      box-sizing: border-box;
      // border-bottom: 1px solid #ccc;
      p{
        padding-left: 40px;
      }
    }
  }
  
}
</style>